<template>
  <view class="planWarper">
    <rich-text :nodes="imageNode" />
    <view class="action">
      <AtButton class="button" open-type="contact"> 联系客服加入计划 </AtButton>
    </view>
  </view>
</template>

<script lang="ts">
import { AtButton } from "taro-ui-vue";
import Taro from "@tarojs/taro";

export default {
  components: {
    AtButton,
  },
  data() {
    return {
      carousels: [
        {
          id: 1,
          planName: "01.高血糖管理服务30天降糖详情页",
          src: "https://manbingguanli.oss-cn-beijing.aliyuncs.com/wenduo/ff4b121bcb344dcd963f74f4ab857a1c01.高血糖管理服务30天降糖详情页.jpg",
        },
        {
          id: 2,
          planName: "02.高血脂管理服务30天降血脂详情页",
          src: "https://manbingguanli.oss-cn-beijing.aliyuncs.com/wenduo/a8ddbdfefe5543c8a24e43e85fa52cb7WechatIMG4682.jpeg",
        },
        {
          id: 3,
          planName: "03.健康减重管理服务30天赶走小肚腩详情页",
          src: "https://manbingguanli.oss-cn-beijing.aliyuncs.com/wenduo/33cde87ba5614d1aaa0f17c94c57e8d103.健康减重管理服务30天赶走小肚腩详情页.jpg",
        },
        {
          id: 4,
          planName: "04.高血压管理服务30天降血压详情页",
          src: "https://manbingguanli.oss-cn-beijing.aliyuncs.com/wenduo/45e6d39c7b1545b5934ff5e43fac005204.高血压管理服务30天降血压详情页.jpg",
        },
      ],
    };
  },
  computed: {
    imageSrc() {
      const current = Taro.getCurrentInstance();
      const planName = current.router?.params.planName;
      const image = this.carousels.find(
        (item) => item.planName === planName
      ) || { src: "" };
      return image.src;
    },
    imageNode() {
      return `<img style="width: 100VW" src="${this.imageSrc}" />`;
    },
  },
};
</script>

<style lang="less">
.planWarper {
  padding-bottom: 140rpx;
  margin-bottom: env(safe-area-inset-bottom);
  background-color: #f8f7fa;
  .action {
    background-color: #fff;
    padding: 1rem 0 env(safe-area-inset-bottom) 0;
    position: fixed;
    width: 100vw;
    bottom: 0;
    right: 0;
    left: 0;
    .button {
      margin: 0 1rem;
      border-radius: 30px;
      border: none;
      color: #fff;
      background-color: #6c63ff;
    }
  }
}
</style>
